<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎加入Share</title>
<meta http-equiv="Pragma" content="no-cache" />
<script >
var _head_start = new Date();
var ctx= "${ctx }";</script>
<script src="${ctx}/resources/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/packed_init.js" data-cfg-autoload="false"></script>
<style type="text/css">
html{color:#111;background:#fff}body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,i,strong,th,var,optgroup{font-style:normal;font-weight:normal}ul,ol{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{*font-size:100%}pre{white-space:pre-wrap;word-wrap:break-word}a{cursor:pointer}a:link{color:#37a;text-decoration:none}a:visited{color:#669;text-decoration:none}a:hover{color:#fff;text-decoration:none;background:#37a}a:active{color:#fff;text-decoration:none;background:#f93}a img{border-width:0;vertical-align:middle}body,td,th{font:12px Helvetica,Arial,sans-serif;line-height:1.62}table{border-collapse:collapse;border:0;padding:0;margin:0}wbr:after{content:"\00200B"}textarea{resize:none}input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:0}
h1{word-wrap:break-word;display:block;font-size:25px;font-weight:bold;color:#494949;margin:0;padding:0 0 15px 0;line-height:1.1}h2{font:15px Arial,Helvetica,sans-serif;color:#072;margin:0 0 12px 0;line-height:150%}h3{height:26px;margin-left:4px;font:14px Arial,Helvetica,sans-serif;color:#666;margin-bottom:1px;line-height:1.62;background-color:#f2fbf2}h3 img{margin:1px 1px 0 0}h4{height:26px;margin:0 0 10px 4px;overflow:hidden;font:12px Arial,Helvetica,sans-serif;color:#666;line-height:1.62;background-color:#f2fbf2}
#wrapper{width:950px;margin:0 auto}#content{min-height:420px}#footer{color:#999;padding-top:6px;margin:40px 0 20px 0;overflow:hidden;zoom:1;border-top:1px dashed #ddd}.grid-16-8 .article{float:left;width:590px;padding-right:40px}.grid-16-8 .article .switch-to-shuo{float:right;margin-top:-45px}.grid-16-8 .article .switch-to-shuo a{display:block;width:134px;height:38px;background:url(http://img3.douban.com/pics/switch_to_shuo.png) no-repeat left top}.grid-16-8 .article .switch-to-shuo a:hover{background-position:left -38px}.grid-16-8 .article .switch-to-shuo a:active{background-position:left -76px}.grid-16-8 .aside{float:right;width:310px}.grid-4-14-6 .nav{float:left;width:150px;margin-right:10px}.grid-4-14-6 .article{float:left;width:540px;padding-right:10px}.grid-4-14-6 .aside{float:right;width:230px}.extra{clear:both;text-align:right}
body{margin-top:0}#header{width:100%;margin:0 0 40px 0;background:0;position:relative}#searbar{margin:0}#header:after,.site-nav:after,.top-nav-items:after,.top-nav:after,.site-nav .bd:after{content:'\0020';display:block;clear:both;height:0}.top-nav{clear:both;width:100%;color:#d4d4d4;margin-bottom:20px;height:30px;border-bottom:1px dashed #d4d4d4;*position:relative;*z-index:2}.top-nav .bd{width:950px;margin:0 auto}.top-nav-items{float:left;*position:relative;font-size:12px;margin-top:3px}.top-nav-items li{float:left;display:inline;margin:2px 20px 0 0}.top-nav-items li.top-nav-more{position:relative;z-index:50;left:0;top:-1px;_top:2px}.top-nav-items li.top-nav-more a{color:#566d5e}.top-nav-items li.top-nav-more a:hover{color:#fff}.top-nav-items li .top-nav-more-items{position:absolute;width:50px;padding:1px 4px;zoom:1;z-index:2}.top-nav-items li .top-nav-more-items.on{height:80px;height:84px\9;_height:80px}.top-nav-items li .top-nav-more-items a{padding:0}.top-nav-items li .arrow{display:inline-block;border-width:4''px;border-color:#566d5e transparent transparent transparent;border-style:solid dashed dashed dashed;width:0;height:0;font-size:0;line-height:0;vertical-align:middle}.top-nav-items li a:hover .arrow{border-color:#fff transparent transparent transparent}.top-nav-items li .top-nav-more-items ul{display:none;overflow:hidden}.top-nav-items li .top-nav-more-items ul li{float:none;display:block;margin:0}.top-nav-items li .top-nav-more-items ul li a{display:inline-block;width:100%}.top-nav-items li .on{border:1px solid #ccc;background:#fff;padding:0 3px}.top-nav-items li .on ul{display:block}.nav-srh{float:left;height:38px;padding-left:5px;background:url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat 0 0}.nav-srh form{padding:0 1px 0 0;height:38px;*float:left;background:url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat 100% 0}.nav-srh input{float:left;width:300px;height:26px;line-height:26px;border:1px solid #a6d098;background:#fff;padding:0 2px;-webkit-appearance:none;-webkit-border-radius:0}.nav-srh .inp{position:relative;padding-top:5px;width:366px}.nav-srh label{position:absolute;color:#ddd;left:4px;top:5px;line-height:24px;cursor:text}.nav-srh .bn-srh{width:54px;height:29px;font-size:13px;padding:1px 0 3px 3px;border:0;background:transparent url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat 0 -100px;cursor:pointer;letter-spacing:3px;text-align:center}.nav-srh .bn-srh{padding:2px 0 0 0\9}label.inp-placeholder{position:absolute;left:0;white-space:nowrap;margin-left:9px;line-height:1.4;*line-height:1.2;color:#c6c6c6;cursor:text;-webkit-transition:color .2s;-moz-transition:color .2s}label.inp-active{color:#ddd}.humble-form input.text{width:290px;height:1.2em;line-height:1.2;padding:7px 6px;*padding:10px 6px 6px;border:1px solid #dcdcdc;border-radius:3px}.humble-form .bn-srh{background:transparent url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat -191px -102px;text-indent:-100px;border:0;overflow:hidden;cursor:pointer;width:23px;height:23px;margin-left:-28px}.humble-form label.inp-placeholder{margin-top:2px}.pro-nav .nav-srh{float:left}.site-nav{width:100%;height:36px;clear:both}.site-nav .bd{float:right;height:36px;width:84%}.site-nav-logo{float:left;position:relative;*margin-top:2px}#db-nav-main .bd{width:774px;background-color:#e7f3e7}.site-nav-logo a:hover,.site-nav-logo a:active,.site-nav-logo a{background:transparent}.top-nav-info{float:right;margin-top:5px;*margin-top:6px}.top-nav a:link,.top-nav a:visited,.top-nav a:hover,.top-nav a:active{color:#566d5e}.top-nav a:hover{background-color:#566d5e;color:#fff}.top-nav li.on{color:#000}.top-nav li.on,.top-nav li.on a:link,.top-nav li.on a:visited,.top-nav li.on a:hover,.top-nav li.on a:active{color:#219a44;font-weight:800}.top-nav li.on a:hover{color:#fff;background:#219a44}.top-nav em,.site-nav em{font-style:normal}.top-nav-info a{margin-left:10px}.site-nav-items{float:left;position:relative;left:0;top:0;padding-left:28px;line-height:36px;color:#d4d4d4}.site-nav-items #online_guide{color:#6c6869;position:absolute;top:37px;left:180px;padding:6px;width:120px;line-height:20px;border:1px solid #9bc59b;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}.site-nav-items #online_guide .arrowUp{z-index:2;position:absolute;top:-12px;left:95px;height:0;width:0;font-size:0;line-height:0;border-left:6px dashed transparent;border-top:6px dashed transparent;border-right:6px dashed transparent;border-bottom:6px solid #fff}.site-nav-items #online_guide .arrowUpBorder{position:absolute;top:-14px;left:94px;height:0;width:0;font-size:0;line-height:0;border-left:7px dashed transparent;border-top:7px dashed transparent;border-right:7px dashed transparent;border-bottom:7px solid #9bc59b}.site-nav-items li{float:left;display:inline;margin-right:14px;background:url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat 0 -140px}.site-nav-items li a:link,.site-nav-items li a:hover,.site-nav-items li a:visited,.site-nav-items li a:active{font-size:14px;color:#0c7823;margin-left:14px;vertical-align:middle}.site-nav-items li a:hover{background-color:#0c7823;color:#fff}.site-nav h1{font-size:21px;padding:8px 0}.nav-tip{margin-bottom:-2em;text-align:right;line-height:2;*position:relative}.nav-tip a{margin-left:10px}.srh-group{border-top:1px solid #ddd;margin-top:5px;padding-top:5px}.srh-group a:hover{background:#777!important}.single-nav{padding-top:15px}.blur{color:#ddd}.submenu{float:left;position:relative;width:45px;height:21px;border:1px solid #b6c9c1;border-left:none;margin:0 2px 0 -5px;background:#fff;padding:2px 0 1px 0}.submenu .menu{position:absolute;width:85px;top:24px;right:-1px;background:#fff;border:1px solid #b6c9c1}.submenu .selected{padding:0 0 0 5px;border-left:1px solid #b6c9c1;cursor:pointer}.submenu .selected span{position:absolute;width:7px;height:5px;right:4px;top:10px;overflow:hidden;background:url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat -240px -124px}.submenu .menu li{width:100%}.submenu .menu a{display:block;padding:2px 10px}.nav-srh .open span{background-position:-240px -100px}.submenu .line{height:1px;font-size:0;line-height:0;margin-bottom:1px;overflow:hidden;border-bottom:1px solid #c3c3c3}a.bn-radio:link,a.bn-radio:visited,a.bn-radio:hover,a.bn-radio:active{position:relative;margin:0 4px;padding:0 0 0 24px;zoom:1;height:14px;overflow:hidden;vertical-align:text-bottom;background:url(http://img3.douban.com/pics/nav/ic_radio2.gif) no-repeat 0 0;*vertical-align:baseline;line-height:15px;*margin:0;*top:-1px}a.bn-radio:hover{color:#fff;background-color:#6a7e71}#db-nav-movie .site-nav-items li{margin-right:9px}#db-nav-movie .nav-srh{background-position:0 -50px}#db-nav-movie .nav-srh form{background-position:100% -50px}#db-nav-movie .nav-srh input{border-color:#8cd4de}#db-nav-movie .nav-srh .bn-srh{background-position:-130px -100px}#db-nav-movie .site-nav-items li a:link,#db-nav-movie .site-nav-items li a:hover,#db-nav-movie .site-nav-items li a:visited,#db-nav-movie .site-nav-items li a:active{font-size:14px;color:#0090b3;margin-left:12px;vertical-align:middle}#db-nav-movie .site-nav-items li a:hover{background-color:#0090b3;color:#fff}#db-nav-movie .site-nav-items li.new a:link,#db-nav-movie .site-nav-items li.new a:visited,#db-nav-movie .site-nav-items li.new a:active{color:#f93}#db-nav-movie .site-nav-items li.new a:hover{color:#fff;background:#f93}#db-nav-book .site-nav-items li{margin-right:9px}#db-nav-book .site-nav-items li a:link,#db-nav-book .site-nav-items li a:hover,#db-nav-book .site-nav-items li a:visited,#db-nav-book .site-nav-items li a:active{margin-left:12px}#db-nav-book .site-nav-items li.annotation{position:relative}#db-nav-book .site-nav-items li.annotation sub{position:absolute;right:-20px;top:0;z-index:2;width:20px;height:10px;text-indent:-9999px;background:url(http://img3.douban.com/pics/icon/sub_book_annotation.gif) no-repeat right center}#db-nav-book li .lnk-buy{display:-moz-inline-box;display:inline-block;zoom:1;width:66px;height:21px;line-height:22px;*line-height:23px;overflow:hidden;background:transparent url(http://img3.douban.com/pics/nav/ui_ns_sbg4.png) no-repeat -280px -120px;font-size:12px;color:#368332;*margin-top:8px}*:first-child+html #db-nav-book .nav-anon .lnk-buy{margin-top:0}#db-nav-movie .site-nav-items,#db-nav-book .site-nav-items{padding-left:20px}#db-nav-book .site-nav-items{_margin-right:-5px}#db-nav-book li .lnk-buy em{margin-left:24px}#db-nav-book li.site-nav-prom{position:relative;left:0;top:0;zoom:1}*+html #db-nav-book li.site-nav-prom{top:-4px}#db-nav-book li.site-nav-prom sup{position:absolute;left:65px;top:-2px;width:60px;height:10px;background-image:url(http://img3.douban.com/pics/icon/cart_coupon_status.gif);background-repeat:no-repeat;text-indent:-9999px;line-height:10px}#db-nav-book li.site-nav-prom sup.coupon{background-position:0 0}#db-nav-book li.site-nav-prom sup.re-arrival{background-position:0 -10px}#db-nav-main .site-nav-items li{margin-right:26px;*margin-right:22px;background:0;color:#e9f4e9}#db-nav-main .site-nav-items li a{margin:0}#db-nav-main .bd{background-color:#e9f4e9}#db-nav-main .nav-srh input{width:264px;height:24px}#db-nav-main .nav-srh .inp{width:300px}#db-nav-music .site-nav-items li{margin-right:30px;background:0;color:#eff2ef}#db-nav-music .bd{background-color:#e9ede9}#db-nav-main .nav-srh,#db-nav-main .nav-srh form,#db-nav-music .nav-srh,#db-nav-music .nav-srh form{background:0}#db-nav-main .nav-srh,#db-nav-music .nav-srh{float:right;height:36px}#db-nav-main .nav-srh form,#db-nav-music .nav-srh form{height:36px}#db-nav-music .nav-srh input{width:235px;height:24px}#db-nav-main .nav-srh .bn-srh,#db-nav-music .nav-srh .bn-srh{width:50px;height:26px;*padding-top:1px}#db-nav-music .nav-srh .inp{width:300px}#db-nav-music .site-nav-items li a:link,#db-nav-music .site-nav-items li a:hover,#db-nav-music .site-nav-items li a:visited,#db-nav-music .site-nav-items li a:active{font-size:14px;color:#3b5343;margin-left:0;vertical-align:middle}#db-nav-music .site-nav-items li a:hover{background-color:#607869;color:#fff}#db-nav-music .nav-srh input{border-color:#b6c9c1}#db-nav-music .nav-srh .bn-srh{background-position:-60px -100px}#db-nav-main .nav-srh .bn-srh{width:27px;margin-left:-4px;overflow:hidden;text-indent:-100px;background-position:-190px -100px}#db-nav-main .site-nav-logo{padding-top:3px;_padding-top:0;_height:34px}#db-nav-music .site-nav-logo,#db-nav-movie .site-nav-logo,#db-nav-book .site-nav-logo{padding-top:5px}#db-nav-music .site-nav-logo a:hover img,#db-nav-movie .site-nav-logo a:hover img,#db-nav-book .site-nav-logo a:hover img,#db-nav-location .site-nav-logo a:hover img{opacity:.8;filter:alpha(opacity=80)}.block4{clear:both;margin-bottom:30px}#db-music-artists .headline{width:100%;margin-bottom:30px}#db-music-artists .item:after,#db-music-artists .headline:after{content:'\0020';clear:both;display:block}#db-music-artists .headline h3{height:auto;background:transparent;margin:0}#db-music-artists{color:#535353}#db-music-artists .headline .pic{float:left;margin-right:20px}#db-music-artists .headline .pic img{margin-bottom:-6px}#db-music-artists .headline p{margin:5px 0}#db-music-artists .item{display:inline-block;*display:inline;*zoom:1;width:46%;*width:46.5%;margin:0 20px 20px 0;vertical-align:top}#db-music-artists .item .pic{width:60px}#db-music-artists .item .pic,#db-music-artists .item .info{display:table-cell;*float:left;vertical-align:top}#db-event-hosts .group{clear:both;zoom:1;margin-bottom:20px;border-bottom:1px dashed #ddd;padding-bottom:5px}#db-event-hosts .group:after{content:'\0020';display:block;clear:both}#db-event-hosts .group li{float:left;width:32.3%;white-space:nowrap;overflow:hidden;margin-right:1%;height:22px}#db-nav-location{position:relative;z-index:1}#db-nav-location .site-nav-logo{height:35px;width:124px;overflow:hidden}#db-nav-location .site-nav-logo img{margin-top:3px;*margin-top;0;vertical-align:text-top;background:#fff}#db-nav-location .site-nav-logo em{margin-left:-9999em}#db-nav-location .site-nav-items li{margin-right:30px;background:0;color:#666;font-size:14px;position:relative;font-weight:600}#db-nav-location .site-nav-items li span{vertical-align:middle}#db-nav-location .site-nav-items li a{margin:0}#db-nav-location .site-nav-items a:link,#db-nav-location .site-nav-items a:visited{color:#0192b5}#db-nav-location .site-nav-items a:hover,#db-nav-location .site-nav-items a:active{background-color:#0192b5;color:#fff}#db-nav-location .bd{float:left;width:auto;margin-right:-1000em}#db-nav-location .local-label{position:relative;float:left;height:36px;padding:5px 22px 0 25px}#db-nav-location .local-label a.label:link,#db-nav-location .local-label a.label:visited,#db-nav-location .local-label a.label:hover,#db-nav-location .local-label a.label:active{display:inline-block;float:left;padding:6px 10px 7px;font:700 14px/1 tahoma,arial,'stheiti','黑体',sans-serif;background-color:#e6e6e6;border-radius:4px;color:#333;*line-height:14px;*padding-top:8px;*padding-bottom:5px}#db-nav-location .local-label a.label:hover{background-color:#eee}#db-nav-location .local-list{display:none;position:absolute;z-index:10;left:24px;top:34px;border:1px solid #ddd;width:16.2em;background:#fff;border-radius:3px;-moz-border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 6px rgba(0,0,0,0.1);padding:12px 0 6px 20px}#db-nav-location .local-list li{display:inline-block;*display:inline;zoom:1;vertical-align:top;width:4em;margin:0 -3px 6px 0;white-space:nowrap}#db-nav-location .local-label em{display:inline-block;*display:inline;zoom:1;margin-left:5px;margin-top:-4px;border-color:#333 transparent transparent;border-style:solid dashed dashed;border-width:5px 5px 0;height:0;line-height:0;vertical-align:middle;width:0}#db-nav-location .label-active em{border-color:transparent transparent #333;border-style:dashed dashed solid;border-width:0 5px 5px;margin-top:-4px}#db-nav-location .ic_new{position:absolute;margin:8px 0 0 0;margin-top:-2px\9;width:20px;height:9px;overflow:hidden;background:url(http://img3.douban.com/pics/icon/ic_new.png) no-repeat 0 0}#loc-nav-search{background:0;position:absolute;right:0;padding:0;top:4px;z-index:2}#loc-nav-search input.text{width:296px}#loc-nav-search .bn-srh{margin-top:4px}#db-nav-group .bd{background-color:#f0f4f5}#db-nav-group .site-nav-items li{margin-right:30px;background:0;color:#eff2ef}#db-nav-group .nav-srh{float:right;height:36px}#db-nav-group .nav-srh,#db-nav-group .nav-srh form{background:0}#db-nav-group .nav-srh form{height:36px}#db-nav-group .nav-srh input{width:235px;height:24px}#db-nav-group .nav-srh .bn-srh{width:50px;height:26px;*padding-top:1px}#db-nav-group .nav-srh .inp{width:300px}#db-nav-group .nav-srh input{border-color:#b5c9c0}#db-nav-group .nav-srh .bn-srh{background-position:-60px -100px}#db-nav-group .site-nav-items li a:link,#db-nav-group .site-nav-items li a:visited,#db-nav-group .site-nav-items li a:hover,#db-nav-group .site-nav-items li a:active{color:#0a83a0}#db-nav-group .site-nav-items li a:hover,#db-nav-group .site-nav-items li a:active{color:#fff;background-color:#0a83a0}#db-nav-group .site-nav-logo{padding-top:5px}#db-nav-group .site-nav-logo a:hover img{opacity:.8;filter:alpha(opacity=80)}
.paginator{width:100%;zoom:1;font:14px Arial,Helvetica,sans-serif;color:#aaa;margin:20px 0;line-height:150%;text-align:center}.paginator a,.thispage,.break{padding:0 4px;margin:2px}.paginator .prev{margin-right:20px}.paginator .next{margin-left:20px}.paginator .next a,.paginator .prev a{padding:0;margin:0}.paginator .count{margin-left:20px;font-size:14px}.paginator .thispage{color:#fff;background:#83bf73}.paginator .break{color:#999}.paginator .thispage{color:#fff;background:#83bf73}.paginator .break{color:#999}
.attn { color: #FF3300; }
.fright { float: right }
.gact { color: #BBBBBB; font-size: 12px; text-align: center; cursor:pointer; }
.gact a:link, a.gact:link { color: #BBBBBB; font-size: 12px; text-decoration: none; text-align: center; }
.gact a:visited, a.gact:visited { color: #BBBBBB; font-size: 12px; text-decoration: none; text-align: center; }
.gact a:hover, a.gact:hover { color: #FFFFFF; font-size: 12px; border-left: 1px solid #FF9999; border-top: 1px solid #FF9999; border-right: 1px solid #FF3333; border-bottom: 1px solid #FF3333; background-color: #773333; text-align: center; }
.m { font-size: 14px; line-height: 120%; color: #006600; }
.m a, .m a:visited, a.m, a.m:visited { font-size: 14px; line-height: 120%; color: #006600; text-decoration: none; }
.m a:hover, a.m:hover { font-size: 14px; line-height: 120%; color: #fff; text-decoration: none; background: #006600; }
.m a:active, a.m:active { color: #fff; text-decoration: none; background: #FFAAFF; }
.message{ overflow:hidden;zoom:1;border:1px solid #FAF3CA;padding:10px;background:#fffadc;margin-bottom:10px; }
.pl2, .pl { color:#666; }   
a { color: #336699 }
em { font-style: normal }
form { position: relative; left: 0; top: 0 }
.item { clear:both;margin: 15px 0 }
.item-error { margin-left: 75px; color: #fe2617 }
.suggestion { padding-left: 75px }
label { display: inline-block; float:left; margin-right: 15px; text-align: right; width: 60px; font-size: 14px; line-height: 30px; vertical-align: middle }
p.agreement { margin-left: 75px; }
.agreement-label { display: inline; width: auto; text-align: left; float: none }
.box { margin-left: 75px }
.basic-input { width: 200px; padding: 5px; height: 18px; font-size: 14px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #c9c9c9 }
.item .basic-input:focus { border: 1px solid #a9a9a9 }
.validate-option { display: none; color: #808080 }
.validate-error { display: none; color: #fe2617 }
p.validate-error { margin-left: 75px }
.loc-item .validate-error { line-height: 30px }
.extra-tips .validate-error , .extra-tips .validate-option { padding-left: 10px; background: url(http://img3.douban.com/pics/icon/tips_arrow.gif) no-repeat}
.extra-tips .validate-error { background-position: left -51px }
.extra-tips .validate-option { background-position: left 5px }
.loc { font-size: 12px; line-height: 30px }
.tips , #location , .agreement-label { font-size: 12px; color: #808080 }
#location strong { color: #111111; font-weight: normal }
.captcha-item span.validate-error { padding-left: 10px; background: url(http://img3.douban.com/pics/icon/tips_arrow.gif) no-repeat left -51px ; display: none }
.captcha-img { margin: 2px 6px 0 0; vertical-align: top }
.captcha-item label { height: 90px }
.captcha-item .basic-input { width: 95px }
.captcha-item { zoom: 1 }
.agreement input , .agreement label { cursor: pointer }
.agreement-label { color: #000 }
#email_suggestion { display: inline-block; position: absolute; left: 75px; top: 30px; _left: 0px }
#email_suggestion p { background: #eef9eb; border: 1px solid #5e5e5f; margin: 0; padding: 3px }
.btn-submit { cursor: pointer; font-size: 14px; font-weight: bold; padding: 6px 26px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; *width: 100px }
.disabled { color: #999; background: #f0f0f0; border: 1px solid #b9b9b9 }
.enabled { color: #ffffff; background: #3fa156; border: 1px solid #528641 }
.device-mobile .captcha-img { display:block;max-width:60%; }
.device-mobile .captcha-item p { margin-bottom:1em; }
.device-mobile .item-submit { margin-bottom:2em;  }
/* 3rd login*/
.item-3rd { padding:5px 0;width:200px;margin:20px 0 0 75px;border-top:1px solid #eee;border-bottom:1px solid #eee; }
.item-3rd label { width:auto;margin:0;font-size:12px;color:#999;line-height:1.5; }
.item-3rd img { margin:0 5px;vertical-align:middle; }
.item-3rd a:hover { background-color:transparent; }
.item-3rd a:active { background-color:transparent; }
.single-nav {padding-top:30px;}
</style>
<script>
      
Do.add('dialog-css', {path: '${ctx}/resources/css/packed_dialog.css', type: 'css'});
Do.add('dialog', {path: '${ctx}/resources/js/packed_dialog.js', type: 'js', requires: ['dialog-css']});
Do.add('validate', {path: '${ctx}/resources/js/packed_validate.js', type: 'js'});

</script>
</head>
<body>
    <div id="wrapper">	        
	<div id="header">
  <div class="site-nav single-nav">
    <div class="site-nav-logo">
      <a href="">
          <img src="http://img3.douban.com/pics/nav/lg_account.png" alt="豆瓣">
      </a>
    </div>
  </div>  
</div>

        
    <div id="content">
        
    <h1>欢迎加入Share</h1>

    <div class="grid-16-8 clearfix">
        
        
        <div class="article">
	  
    
    <form name="lzform" method="post" action="${ctx }/register">
        <div class="item extra-tips">
            <label>邮箱</label>
            <input id="email" name="form_email" type="text" class="basic-input" maxlength="60" tabindex="1" value=""/>
        </div>
        <div class="suggestion">
            <div id="email_suggestion"></div>
        </div>
        <div class="item extra-tips">
            <label>密码</label>
            <input id="password" name="form_password" type="password" class="basic-input" tabindex="2" maxlength="20"/>
        </div>
        <div class="item extra-tips">
            <label>名号</label>
            <input id="name" name="form_name" type="text"
            class="basic-input" maxlength="15" tabindex="3" value=""/>
        </div>
        <div class="suggestion">
            <span class="tips">第一印象很重要，起个响亮的名号吧</span>
        </div>
        <div class="item captcha-item">
            <label>验证码</label>
            <p><img src="${ctx}/captcha" class="captcha-img"/></p>
            <input type="text" name="captcha" class="basic-input captcha" id="captcha" tabindex="4" maxlength="10"/>
        </div>
        <div class="item-submit">
            <label>&nbsp;</label>
            <input type="submit" value="注册" disabled="disabled" id="button" class="btn-submit disabled" tabindex="6" title="注册"/>
        </div>
    </form>

	</div>
        <div class="aside">
            
<p class="pl">&gt;&nbsp;已经拥有Share帐号? <a rel="nofollow" href="${ctx }/login">直接登录</a></p>

        </div>
        <div class="extra">
            
        </div>
    </div>
    </div>

        
    <div id="footer">
		<span id="icp" class="fleft gray-link">
    		&copy; 2005－2013 Share, all rights reserved
		</span>
    </div>
</div>
    <!-- COLLECTED JS -->
    
<script>
function loadTestImage(action){
    frm = document.lzform;
    frm.action=action;
}

Do('validate','dialog',function(){
    var email = $('#email'),
        suggestion = $('#email_suggestion'),
        email_value = '',
        e_name = '',
        e_domain = '',
        e_tip_on = 0,
        passwd_reg = /^[\u4e00-\u9fa5]/,

        email_list = new Array('163.com','126.com', '139.com', '188.com', '2008.china.com', '2008.sina.com', '21cn.com', '263.net', 'china.com', 'chinaren.com', 'citiz.net', 'eyou.com', 'foxmail.com', 'gmail.com', 'hongkong.com', 'hotmail.com', 'live.cn', 'live.com', 'mail.china.com', 'msn.com', 'my3ia.sina.com', 'qq.com', 'sina.cn', 'sina.com', 'sina.com.cn', 'sogou.com', 'sohu.com', 'vip.163.com', 'vip.qq.com', 'vip.sina.com', 'vip.sohu.com', 'vip.tom.com', 'yahoo.cn', 'yahoo.com', 'yahoo.com.cn', 'yahoo.com.hk', 'yahoo.com.tw', 'yeah.net');

      

    function DPA(s1, s2){
        var m = new Array();
        var i, j;
        for(i=0; i < s1.length + 1; i++) m[i] = new Array(); // i.e. 2-D array

        m[0][0] = 0; // boundary conditions

        for(j=1; j <= s2.length; j++)
            m[0][j] = m[0][j-1]-0 + 1; // boundary conditions

        for(i=1; i <= s1.length; i++)                            // outer loop
        {
            m[i][0] = m[i-1][0]-0 + 1; // boundary conditions

            for(j=1; j <= s2.length; j++)                         // inner loop
            {
                var diag = m[i-1][j-1];
                if( s1.charAt(i-1) != s2.charAt(j-1) ) diag++;

                m[i][j] = Math.min( diag,               // match or change
                Math.min( m[i-1][j]-0 + 1,    // deletion
                m[i][j-1]-0 + 1 ) ); // insertion
            }//for j
        }//for i
       return m[s1.length][s2.length];
    };

    function get_like(s){
        r = 0;
        v = s.split('@');
        if ( v.length <=1 ) return;
        domain = v[1];
        e_name = v[0];
        dis = domain.length;
        for (k=0; k < email_list.length; k++){
            e = email_list[k];
            d = DPA(domain, e);
            if (d < dis){
                dis = d;
                e_domain = e;
            }
        }
        if(dis && dis < 4){
            r = 1;
        }
        return r;
    };

    function email_suggestion(like){
        s = email.attr('value');
        if (!( s && s.length > 2 )) {
            return;
        }
        if (like && get_like(s)){
            as = ' <a id="yes_but" href="#">是</a>／<a href="#" id="no_but">不是</a>';
            suggestion.html( '<p><span>你是否要输入' + e_name + '@</span>' + e_domain + as + '</p>' );
            $("#yes_but").focus();
            e_tip_on = 1;
        }

        email_value = email.attr('value');
        return r;
    };

    $('#email').focusout(function() {
        var e = $(this).parents('.item').hasClass('has-error');
        if ( !e ) {
            email_suggestion(1);
        }
    });

    $('body').delegate('#yes_but', 'click', function(e) {
        e.preventDefault();
        email.attr('value', e_name + '@' + e_domain);
        email.focus();
        suggestion.html( '' );
        e_tip_on = 0;
    });
    $('body').delegate('#no_but', 'click', function(e) {
        e.preventDefault();
        suggestion.html( '' );
        e_tip_on = 0;
    });
    $("input[type='submit']").attr('disabled', false).addClass('enabled');

    var optionMsg = {
        form_email: '用来登录Share，接收到激活邮件才能完成注册',
        form_password: '至少包含字母和数字，最短8个字符，区分大小写',
        form_name: '中、英文均可，最长14个英文或7个汉字',
    },
    validateError = {
        email: {
            isNull: 'Email不能为空',
            invalidFormat: 'Email格式不正确',
            //unavailable: '',
            unableForTom: '目前暂时不支持使用 tom.com 邮箱注册Share帐号',
            unableForChongseo: '目前暂时不支持使用 chongseo.cn 邮箱注册Share帐号'
        },
        password: {
            isNull: '密码不能为空',
            isShort: '密码长度不足8个字符',
            invalidFormat: '请使用英文字母、符号或数字',
            invalidStrong: '密码强度不够，请包含字母和数字'
        },
        name: {
            isNull: '名号不能为空',
            isLong: '名号长度不能超过14个英文或7个汉字'
        },
        captcha: {
            isNull: '验证码不能为空'
        }
    },
    validateRules = {
        email: {
            elems: 'input[name=form_email]',
            isNull: function(el) {
                return !$.trim(el.val());
            },
            invalidFormat: function(el) {
                  return !$.validate.isEmail($.trim(el.val()));
            },
            unableForTom: function(el,o) {
                var domain = el.val().split('@')[1];
                return domain == 'tom.com';
            },
            unableForChongseo: function(el,o) {
                var domain = el.val().split('@')[1];
                return domain == 'chongseo.cn';
            }

        },
        password: {
            elems: 'input[name=form_password]',
            isNull: function(el) {
                if ( el.val() === '' ) return true;
            },
            isShort: function(el) {
                if ( el.val() !='' && el.val().length < 8 ) {
                    return true;
                }
            },
            invalidFormat: function(el) {
                var s = $.trim(el.val());
                return passwd_reg.test(s);
            },
            invalidStrong: function(el) {
                var s = $.trim(el.val());
                if (!(/\d/.test(s))){
                    return true;
                }
                if (!(/[a-zA-Z\~\)\!\$\%\*\(\_\+\-\=\{\}\[\]\|\:\;\<\>\?\,\.\/\@\#\^\"\'\`\?\&]/.test(s)))
                {
                    return true;
                }
            }
        },
        name: {
            elems: 'input[name=form_name]',
            isNull: function(el) {
                return !$.trim(el.val());
            },
            isLong: function(el) {
                return $.trim(el.val()).replace(/[^\x00-\xff]/g, 'Share').length <= 14 ? false : true;
            }
        },
        captcha: {
            elems: 'input[name=captcha]',
            isNull: function(el) {
                return !$.trim(el.val());
            }

        }
    };
    $('form').validateForm(validateRules, validateError, optionMsg, null);
   
    String.prototype.strReverse=function(){var b="";for(var a=0;a<this.length;a++){b=this.charAt(a)+b}return b};function checkPassword(f){if(!f){return 0}var h=8;if(f.length<h){return 0}var g=0;var e="abcdefghijklmnopqrstuvwxyz";var d="01234567890";var a="~)!@#$%^&*()_+-={}[]|:;<>?,./";if(f.length>=10){g+=20}if(f.length>=12){g+=20}if(f.match(/[a-z]/g)){g+=20}if(f.match(/[0-9]/g)){g+=20}if(f.match(/[A-Z]/g)){g+=20}for(var i=0;i<a.length;i++){if(f.indexOf(a[i])!=-1){g+=20;break}}for(var i=0;i<23;i++){var b=e.substring(i,parseInt(i+3));var c=b.strReverse();if(f.indexOf(b)!=-1||f.indexOf(c)!=-1){g-=20}b=e.toUpperCase().substring(i,parseInt(i+3));c=b.strReverse();if(f.indexOf(b)!=-1||f.indexOf(c)!=-1){g-=20}}for(var i=0;i<8;i++){var b=d.substring(i,parseInt(i+3));var c=b.strReverse();if(f.indexOf(b)!=-1||f.toLowerCase().indexOf(c)!=-1){g-=20}}return Math.max(g,0)};

    var delayKey,
    displayPasswdMeter = function(n, item) {
      var s,  node = item.find('.validate-meter');

      if (n < 60) {
        s = '弱';
      } else if (n < 80) {
        s = '一般';
      } else {
        s = '强';
      }

      item.find('.validate-option, .validate-error').hide();

      if (node.length === 0) {
        node = $('<span class="validate-meter"></span>').appendTo(item);
      }

      node.show().text('密码强度：' + s);
    };

    $('#password').bind({
      focus: function() {
        var el = $(this),
        item = el.parent();

        if (item.find('.validate-error').css('display') === 'inline') {
          return;
        }

        if (el.val().length >= 8) {
          item.find('.validate-option').hide();
        }
      },

      blur: function() {
        var el = $(this),
        item = el.parent(),
        error = item.find('.validate-error');

        if (error.css('display') === 'inline') {
          item.find('.validate-meter').hide();
          return;
        }
      },

      keyup: function(e) {
        var el = this;
        if (this.value.length < 8) {
          return;
        }
        delayKey && clearTimeout(delayKey);
        delayKey = setTimeout(function(){
          displayPasswdMeter(checkPassword(el.value), $(el).parent());
        }, 10);
      }
   });

});
</script>
</body>
</html>
